import React from 'react';
import { observer, inject } from 'mobx-react';
import * as mobx from 'mobx';
import { withRouter } from 'react-router-dom';
import { List,Bubble } from 'weaver-mobile';
import { Form,RouteLayout } from 'weaver-mobile-page';

@inject('wfEhOperatorStore')
@withRouter
@observer
export default class Main extends React.Component{
    constructor(props){
        super(props);
    }
    componentDidMount(){
        const { wfEhOperatorStore,location } = this.props;
        wfEhOperatorStore.doEhInit(location);
    }
    getFields(){
        const arr = [];
        const { form } = this.props.wfEhOperatorStore;
        const isInit = form && form.isInit;
        if(isInit){
            const conditioninfo = mobx.toJS(form.conditioninfo);
            conditioninfo && conditioninfo.map(field =>{
                arr.push(<Form.Item
                    key={field.domkey.join('__')}
                    form={form}
                    fieldConfig={field}
                    onChange={form.onChange}
                />);
            });
        }
        return arr;
    }
    getBtns(){
        const { location,history,wfEhOperatorStore } = this.props;
        const { form,callback } = wfEhOperatorStore;
        const btns = [{
            key:"clear",
            text:"取消",
            onClick: () =>{
                const ehparams = {eh_setoperator:"n", isFirstSubmit:1, ehnextnodeid:(location.params && location.params.ehnextnodeid) || ''};
                callback(ehparams);
                history.go(-1);
            }
        },{
            key:"confirm",
            text:"确定",
            type:"primary",
            onClick: () =>{
                const { relationship,operators } = form && form.formParams || {};
                if(!operators){
                    Bubble.warning("请选择节点操作者", 2);
                    return;
                }
                let ehparams = {eh_setoperator:"y", isFirstSubmit:1};
                ehparams = {...ehparams, ...{eh_relationship:relationship, eh_operators:operators}};
                callback(ehparams);
                history.go(-1);
            }
        }];
        return <RouteLayout.ButtonGroup data={btns} />;
    }
    render(){
        const { form } = this.props.wfEhOperatorStore;
        return (
            <div className="wf-req-ehOperator">
                <List>
                    {this.getFields()}
                </List>
                {this.getBtns()}
            </div>
        )
    }
}